<template>
    <div class="app-container">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
            <el-form-item label="车辆型号" prop="modelName">
                <el-input v-model="formData.modelName" placeholder="请输入车辆型号" clearable :style="{width: '100%'}"
                          :maxlength="30">
                </el-input>
            </el-form-item>
            <el-form-item label="车辆宽度" prop="axisX">
                <el-input v-model="formData.axisX" placeholder="请输入车辆宽度（小于10的数字）" :maxlength="2" clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="车辆长度" prop="axisY">
                <el-input v-model="formData.axisY" placeholder="请输入车辆长度（小于20的数字）" :maxlength="2" clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="notes">车辆长度和宽度的单位长度是一个座位的长度和宽度</div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        inheritAttrs: false,
        components: {},
        props: {
            formData: {
                type: Object,
                default: {
                    id: undefined,
                    modelName: undefined,
                    axisX: undefined,
                    axisY: undefined,
                }
            }
        },
        data() {
            let checkAxisXNumber = (rule, value, callback) => {
                var reg = /^(10|[1-9])$/;
                if (!reg.test(value)) {
                    return callback(new Error("请输入1~10之间的数字"));
                }
            }
            let checkAxisYNumber = (rule, value, callback) => {
                var reg = /^([0-1]?[1-9]|20)$/;
                if (!reg.test(value)) {
                    return callback(new Error("请输入1~20之间的数字"));
                }
            }
            return {
                rules: {
                    modelName: [{
                        required: true,
                        message: '请输入车辆型号',
                        trigger: 'blur'
                    }],
                    axisX: [{
                        required: true,
                        message: '请输入车辆宽度',
                        trigger: 'blur'
                    }, {
                        validator: checkAxisXNumber,
                        trigger: 'blur'
                    }],
                    axisY: [{
                        required: true,
                        message: '请输入车辆长度',
                        trigger: 'blur'
                    }, {
                        validator: checkAxisYNumber,
                        trigger: 'blur'
                    }],
                },
            }
        },
        methods: {
            close() {
                this.$emit("onClose");

            },
            handelConfirm() {
                if (this.formData.modelName === undefined){
                    this.msgError("请输入车辆型号");
                    return;
                }
                if (this.formData.axisX === undefined){
                    this.msgError("请输入车辆宽度");
                    return;
                }
                if (this.formData.axisY === undefined){
                    this.msgError("请输入车辆长度");
                    return;
                }
                this.$emit("onConfirm", this.formData);
            },
        }
    }

</script>
<style scoped>
    .footer {
        float: right;
    }

    .notes {
        border: 1px solid lightgrey;
        height: 100px;
        text-align: center;
        line-height: 100px;
        box-shadow: 2px 2px 10px #909090;
        color: red;
    }
</style>
